<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入组件库 -->
    <script src="index.js"></script>
    <link rel="stylesheet" href="common.css">
    <script src="common.js"></script>
    <title>Title</title>
    <style>
        #add{
            margin: 0 0 0  5% ;
        }
        .goods{
            margin: 10px 0 0 5%;
            display: flex;
            flex-wrap: wrap;
        }
        .good{
            margin-bottom: 10px;
            margin-right: 10px;
        }
        img{
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
<div id="app">

    <el-menu
            default-active="2"
            class="leftNavBar el-menu-vertical-demo"
            text-color="#fff"
            active-text-color="#E6E6E6">
        <div class="title" style="margin-bottom: 10px">
            Market Management
        </div>
        <a href="/market/detail.html">
        <el-menu-item  index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">库存管理</span>
        </el-menu-item>
        </a>
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
        </el-menu-item>
        <a href="/market/detail3.html">
            <el-menu-item  index="3">
                <i class="el-icon-menu"></i>
                <span slot="title">订单管理</span>
            </el-menu-item>
        </a>
        <a href="/market/detail4.html">
            <el-menu-item  index="4">
                <i class="el-icon-menu"></i>
                <span slot="title">入库订单</span>
            </el-menu-item>
        </a>
    </el-menu>
    <div class="right">
        <div class="top"><span></span>{{title}}<span style="margin-right: 5%">
                <el-popover
                        placement="top-start"
                        width="50"
                        trigger="hover"
                >
                    <div style="height:100%;text-align: center"><el-button onclick="logout()">登出</el-button></div>
                           <i slot="reference" class="el-icon-more"></i>
                        </el-popover>
            </span>
        </div>
        <el-alert
                v-if="alertVisible"
                :title="alertText"
                :type="alertType"
                show-icon>
        </el-alert>
<!--   弹出框 详情-->
        <!--弹出框上架-->
        <el-dialog type="text" title="上架" width="500px" :visible.sync="addFormVisible">
            <el-form :model="addGood">
                <el-form-item label="商品id" :label-width="formLabelWidth">
                    <el-input v-model="addGood.iid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品名" :label-width="formLabelWidth">
                    <el-input v-model="addGood.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="addGood.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="售价" :label-width="formLabelWidth">
                    <el-input v-model="addGood.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="介绍" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="addGood.description"></el-input>
                </el-form-item>
                <el-upload
                        class="upload"
                        action
                        :auto-upload="false"
                        :on-change ="handleUpload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        >
                    <el-button size="small" type="primary">图片上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAdd">确 定</el-button>
            </div>
        </el-dialog>
        <!--弹出框——编辑-->
        <el-dialog type="text" title="编辑订单" width="500px" :visible.sync="editFormVisible">
            <el-form :model="editForm">
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="editForm.rest" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="售价" :label-width="formLabelWidth">
                    <el-input v-model="editForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="介绍" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="editForm.description"></el-input>
                </el-form-item>
                </el-form-item>
                <el-upload
                        class="upload-demo"
                        action
                        :auto-upload="false"
                        :on-change ="handleUpload"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                    <el-button size="small" type="primary">图片上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </div>
        </el-dialog>
        <el-button @click="addFormVisible = true"  id="add" size="small" type="primary">添加</el-button>
        <div class="goods" >
        <div class="good" v-for="one in tableData" >

            <el-card :body-style="{ padding: '0px' }" >
                <img :src="baseUrl+one.picture" fit="contain" class="image">
                <div style="padding: 14px;">
                    <span>{{one.name}}</span> <span style="float: right">类型：{{one.type}}</span>
                    <div class="bottom clearfix">
                        <div>售价：{{one.price}}
                       </div>
                        <div><span>余量：{{one.rest}}</span>
                        <span>售出：{{one.sold}}</span></div>

                        <el-popover
                                placement="top-start"
                                title="详情"
                                width="200"
                                trigger="hover"
                                >
                            <div>描述：{{one.description }}</div>
                            <div>货品id：{{one.iid}} 货品名：{{one.item_name}}</div>
                            <i  slot="reference" class="el-icon-info"></i>
                        </el-popover>
                        <el-button type="text"  style="float: right" @click="handleEdit(one)" class="button">编辑</el-button>
                        <el-button type="text"  style="color:red;float: right" @click="offShelve(one.gid)" class="button">下架</el-button>
                    </div>
                </div>
            </el-card>
        </div>
        </div>

    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                baseUrl:"http://122.152.225.202:8080/",
                alertType:'',
                alertVisible:false,
                alertText:"",
                DetailVisible:false,
                editFormVisible:false,
                addFormVisible: false,
                formLabelWidth:"60px",
                addGood:{
                    iid:"",
                    price: null,
                    picture:{},
                    description: '',
                    num: '',
                    name:'',
                },
                editForm:{
                    num: '',
                    name:'',
                    price:'',
                    info:''
                },
                curRow:"",
                fileList:[],
                tableData: [
                ],

                title: '商品管理'
            }
        },
        created(){
            this.load()
            // map.set("key",value)
            // map.set("key1",value1)
            // map.set("key2",value2)
        },

        methods:{

            load(){
                let self = this;
                myGet(baseUrl+'manager/scanGood',{"limit":99},function (response,status) {
                    if(response.result === true) {
                        self.tableData = response.data.detail;
                        console.log(response)
                    }
                })
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleUpload(file,fileList){
                this.addGood.picture=file.raw;
            },
            handleAdd(){
                let self = this;
                let Form = new FormData();
                Form.append('picture',this.addGood.picture)
                Form.append('price',this.addGood.price)
                Form.append('description',this.addGood.description);
                Form.append('name',this.addGood.name);
                Form.append('num',this.addGood.num)
                Form.append('iid',this.addGood.iid)
                myUP(baseUrl+'/manager/addType',Form,function (response,status) {
                    if(response.result === true) {
                        console.log(response);
                        showAlert(self,'success',response.msg);
                        self.load();
                    }
                    else {
                        console.log(response);

                        showAlert(self,'error',response.msg);
                    }
                })
            },
            handleEdit(data) {
                console.log(data);
                this.editForm=data;
                this.editFormVisible=true
            },
            edit(){
                let self = this;
                myPost(baseUrl+'Manager/changeGood',this.editForm,function (response,status) {
                    self.editFormVisible=false;
                    if(response.result === true) {
                        showAlert(self,'success',response.msg);
                        console.log(response);
                        self.load();
                    }
                    else if(response.result === false){
                        showAlert(self,'error',response.msg);
                    }
                })
            },
            offShelve(gid){
                let self = this;
                myPost(baseUrl+'Manager/offShelve',{'gid':gid},function (response,status) {
                    self.editFormVisible=false;
                    if(response.result === true) {
                        showAlert(self,'success',response.msg);
                        console.log(response);
                        self.load();
                    }
                    else if(response.result === false){
                        showAlert(self,'error',response.msg);
                    }
                })
            }
        },




    })

</script>

</html>
